<script setup>
import { updatePassword } from '@/api/updatePassword';
import { findUser } from '@/api/user';
import { findWorkerService } from '@/api/worker';
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue'
import router from '@/router';
import { sendValidation } from '@/api/validation';


const form = reactive({
    email: '',
    type: '',
    code: '',
    password: '',
    rePassword: ''
})

const checkRePsd = (rule, value, cb) => {
    if (value === form.password) {
        return cb();
    }
    //手机号不合法
    cb(new Error('两次输入的密码不同！'));
}

const rules = {
    email: [
        { required: true, message: '邮箱不可为空！', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ],
    type: [{ required: true, message: '类型不可为空！', trigger: 'blur' }],
    code: [{ required: true, message: '验证码不可为空！', trigger: 'blur' }],
    password: [{ required: true, message: '密码不可为空！', trigger: 'blur' }],
    rePassword: [
        { required: true, message: '重复密码不可为空！', trigger: 'blur' },
        { validator: checkRePsd, trigger: ['blur', 'change'] }
    ]
}

const isShow = ref(0)

const time = ref(60)
let timer = null

const countdown = () => {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(() => {
        if (time.value > 0) {
            time.value--; // 时间减1  
            countdown(); // 递归调用，继续倒计时  
        } else {
            clearTimeout(timer); // 倒计时结束，清除定时器  
            // 在这里可以添加倒计时结束后的处理逻辑  
            isShow.value = 2
            time.value = 60
        }
    }, 1000); // 每秒更新一次时间  
}

const validation = async () => {
    if (form.email === null || form.email === '') {
        ElMessage.error('邮箱不可为空')
    } else {
        await sendValidation(form.email)
        ElMessage.success("验证码发送成功")
        isShow.value = 1
        countdown()
    }
}

const put = async () => {
    await updatePassword(form)
    ElMessage.success("修改成功")
    router.push('/login')
}

const toLogin = () => {
    router.push('/login')
}

</script>


<template>
    <div
        style="background-image: url('../../public/bg.png');background-size: cover;width: 100%;height:100vh;overflow: hidden;">
        <div style="background-color: rgb(240,248,255,0.85);width: 550px;height: 100%;position: absolute;right: 0;overflow: hidden;">
            <div style="padding: 30px;">
                <span style="color: black;cursor: pointer;font-size: 20px;" @click="toLogin">
                    <el-icon>
                        <DArrowLeft />
                    </el-icon>返回
                </span>
            </div>
            <div style="width: 400px;margin: 60px auto;">
                <div style="color: rgb(143,70,68);font-size: 30px;text-align: center;padding: 60px;">找 回 密 码</div>
                <el-form :model="form" :rules="rules">
                    <el-form-item prop="email">
                        <el-input style="height: 40px;" v-model="form.email" placeholder="输入您的邮箱">
                            <template #append>
                                <el-select v-model="form.type" placeholder="用户类型" style="width: 120px;" size="large"
                                    prop="type">
                                    <el-option label="业主" value="user" />
                                    <el-option label="工作人员" value="worker" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input style="height: 40px;" v-model="form.code" placeholder="输入邮箱验证码" clearable>

                            <template #suffix>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 0"
                                    @click="validation">获取验证码</el-button>
                                <el-button :type="primary" text style="border: none;color: gray;" v-if="isShow === 1"
                                    disabled>{{ time }}秒</el-button>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 2"
                                    @click="validation">重新获取</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input style="height: 40px;" v-model="form.password" placeholder="输入新的密码" clearable />
                    </el-form-item>
                    <el-form-item prop="rePassword">
                        <el-input style="height: 40px;" v-model="form.rePassword" placeholder="再次输入密码" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="put"
                            style="width: 100%;padding: 20px;font-size:20px;margin-top: 20px;">提
                            交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>